<!--  -->
<template>
    <div>
        <div ref="myChart" id="myChart" class="myChart"></div>
    </div>
</template>

<script>
// const ROOT_PATH ='https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'
import worldData from '@/assets/world.json';
export default {
	name: 'earth-lines',
	data () {
		return {
			option: {
				globe: {
					baseTexture: require('@/assets/images/world.topo.bathy.200401.jpg'), // 地球的纹理/data-gl/asset/world.topo.bathy.200401.jpg---/data-gl/asset/earth.jpg
					heightTexture: require('@/assets/images/bathymetry_bw_composite_4k.jpg'), // 地球的高度纹理

					shading: 'realistic', // 着色效果
					light: {
						main: {
							intensity: 3,
							shadow: true
						},
						ambientCubemap: {
							diffuseIntensity: 0.1
						}
					},
					displacementScale: 0.04,
					viewControl: {
						autoRotate: true,
						zoomSensitivity: 0,
						autoRotateSpeed: 10
					},
					postEffect: {
						enable: true
					},
					globeRadius: 70,
				},
				series: {

					type: 'lines3D',

					coordinateSystem: 'globe',

					blendMode: 'lighter',

					lineStyle: {
						width: 1,
						color: 'rgb(50, 50, 150)',
						opacity: 0.1
					},

					data: ''
				}
			},
			routes: ''
		};
	},

	components: {},

	computed: {},

	mounted () {
		this.setMyEchart(); // 页面挂载完成后执行
		console.log(worldData);
	},

	methods: {
		setMyEchart () {
			const myChart = this.$refs.myChart; // 通过ref获取到DOM节点
			if (myChart) {
				const thisChart = this.$echarts.init(myChart); // 利用原型调取Echarts的初始化方法
				this.setRoute();
				const option = this.option; // {}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
				thisChart.setOption(option); // 将编写好的配置项挂载到Echarts上
				window.addEventListener('resize', function () {
					thisChart.resize(); // 页面大小变化后Echarts也更改大小
				});
			}
		},
		getAirportCoord (idx) {
			return [worldData.airports[idx][3], worldData.airports[idx][4]];
		},
		setRoute () {
			this.routes = worldData.routes.map((airline) => {
				return [
					this.getAirportCoord(airline[1]),
					this.getAirportCoord(airline[2])
				];
			});
			this.option.series.data = this.routes;
		}
	}
};

</script>
<style lang='less' rel="stylesheet/less" scoped>
.myChart{
    width:100%;
    height:9.375rem
}
</style>
